<template>
  <div class="listSearchWrap sysLogSearch">
    <a-row :gutter="[8, 16]">
      <a-col :xs="15" :sm="15" :md="8" :lg="8" :xl="5" :xxl="3">
        <common-select :options="systenNameList" :defaultValue="queryParams.systemNameList"
          @changeoption="changeOption('systemNameList', $event)" :allow-clear="true" mode="multiple" :show-search="true"
          :replaceFields="typeReplaceFields" :placeholder="$t('systemName')" :maxTagCount="1"
          style="width: 100%"></common-select>
      </a-col>
      <a-col :xs="12" :sm="12" :md="6" :lg="6" :xl="3" :xxl="3">
        <common-select :options="operationTypeOptions" :defaultValue="queryParams.handleType"
          @changeoption="changeOption('handleType', $event)" :allow-clear="true" :show-search="true"
          :placeholder="$t('operateType')" :replaceFields="typeReplaceFields" :maxTagCount="1"
          style="width: 100%"></common-select>
      </a-col>
      <a-col :xs="12" :sm="12" :md="6" :lg="6" :xl="3" :xxl="3">
        <common-select :options="statueOptions" :defaultValue="queryParams.status"
          @changeoption="changeOption('status', $event)" :allow-clear="true" :show-search="true"
          :replaceFields="typeReplaceFields" :placeholder="$t('status')" :maxTagCount="1"
          style="width: 100%"></common-select>
      </a-col>
      <a-col :xs="24" :sm="24" :md="10" :lg="8" :xl="7" :xxl="7">
        <a-range-picker @change="onRangeChange" :allow-clear="true"
          :show-time="{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }"
          :value="handleTime" format="YYYY-MM-DD HH:mm:ss" />
      </a-col>
      <a-col :xs="24" :sm="24" :md="14" :lg="16" :xl="6" :xxl="5">
        <div class="searchBtns flex-right">
          <a-button-group>
            <auth-button type="primary" @click="handleSearch">
              <i class="iconfont icon-chazhao"></i>
              {{ $t('inquiry') }}
            </auth-button>
            <a-button @click="clearCondition">
              <i class="iconfont icon-qingkong"></i>
              {{ $t('clear') }}
            </a-button>
          </a-button-group>
          <!-- <auth-button :auth="managePerms.log.export" @click="exportSysLog" :loading="exporting">
            <i class="iconfont icon-xiazai"></i>
            {{ $t('export') }}
          </auth-button> -->
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import syncLogApi from '@/api/modules/system/syncLog'
import AuthButton from '@/components/AuthButton'
import CommonSelect from '@/components/SelfComponents/CommonSelect.vue'
import { managePerms } from '@/config/permission/index'
import { downloadBlobFile } from '@/utils/functions'
import moment from 'moment'
import { mapState } from 'vuex'
export default {
  components: {
    AuthButton,
    CommonSelect
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.syncLog.queryParams,
      order: (state) => state.syncLog.order,
      systemLogTypeDictCode: (state) => state.dict.systemLogTypeDictCode
    }),
    // 日期选择的默认值
    defaultDateRange() {
      if (this.queryParams.handleTime) {
        return moment(this.queryParams.handleTime);
      }
      return "";
    },
    logTypeOption() {
      return this.systemLogTypeDictCode.filter((item) => item.value !== 'SEARCH')
    }
  },
  data() {
    return {
      managePerms,
      handleTime: [],
      systenNameList: [
        { name: "工程院数据源", value: "GCY" },
        { name: "云服务数据源", value: "CLOUD" },
        { name: "生产管理系统数据源", value: "MES" },
        { name: "产品管理平台数据源", value: "PRODUCT" }
      ],
      operationTypeOptions: [
        { name: "同步", value: 1 },
        { name: "重传", value: 0 }
      ],
      typeReplaceFields: {
        key: 'value',
        value: 'value',
        title: 'name'
      },
      statueOptions: [
        { name: "失败", value: 0 },
        { name: "成功", value: 1 },
        { name: "已重传", value: 2 }
      ],
      exporting: false,
      timeRefresh: true
    }
  },
  watch: {},
  created() {
    this.getTitleOptionsData()
  },
  methods: {
    moment,
    // 获取下拉日志标题数据
    getTitleOptionsData() {
      syncLogApi.getSysLogTitlesData().then((res) => {
        this.logTitles = res.data.map((item) => {
          return {
            id: item.code,
            name: item.name
          }
        })
      })
    },
    handleSearch() {
      this.$emit('clickbtn', { type: 'searchData', data: true })
    },
    handleAdd() {
      this.$emit('clickbtn', { type: 'addModule' })
    },
    clearCondition() {
      this.$store.commit('resetSysLogQueryParams')
      this.timeRefresh = !this.timeRefresh;
      this.handleTime = [];
      this.handleSearch()
    },
    onRangeChange(date, dateString) {
      this.queryParams.handleTimeStart = dateString[0];
      this.queryParams.handleTimeEnd = dateString[1];
      this.handleTime = dateString;
    },
    disabledDate(current) {
      return current && current > moment().endOf('day')
    },
    changeOption(key, val) {
      console.log(key, val);
      this.queryParams[key] = val;
    },
    // 导出
    exportSysLog() {
      this.exporting = true

      syncLogApi.exportSysLogData({ ...this.queryParams, order: this.order }).then(res => {
        downloadBlobFile(res, 'system-log.xlsx')
      }).finally(() => {
        this.exporting = false
      })
    }
  }
}
</script>

<style scoped>
.flex-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>